<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="chart-name" content="特性案例：实虚混合线图">
    <title>F2 图表组件库 - AntV</title>
    <link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/YmDAMEQVbLJpVbKiRQVX.css" />
    
</head>
<body>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>

<script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.4.2/f2.min.js"></script>

<script src="https://gw.alipayobjects.com/os/antv/assets/lib/lodash-4.17.4.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<!-- 在 PC 上模拟 touch 事件 -->
<script src="https://gw.alipayobjects.com/os/rmsportal/NjNldKHIVQRozfbAOJUW.js"></script>

  <div class="chart-wrapper">
    <canvas width='300' height='300' id="mountNode"></canvas>
  </div>
  <script>
  //注册自定义形状
  var hybridDefine = {
    draw: function draw(cfg, container) {
      var style = _.assign({
        strokeStyle: cfg.color,
        lineWidth: cfg.size || 2,
        z: cfg.isInCircle
      }, cfg.style);

      var points = cfg.points;
      var dashDim = cfg.style.dashDim || null;

      if (points.length < 2) return;

      if (dashDim) {
          console.log('points:',points);
        var lines = this.splitLines(points, dashDim);
        console.log('lines:',lines);
        var i = 0,
          l = lines.length;
        var shapes = [];
        for (; i < l; i++) {
          var line = lines[i];
          var shape;
          if (line.isDash) {
            shape = container.addShape('Polyline', {
              className: 'line',
              attrs: F2.Util.mix({
                points: line,
                lineDash: [style.lineWidth * 2, style.lineWidth * 2]
              }, style)
            });
          } else {
            shape = container.addShape('Polyline', {
              className: 'line',
              attrs: F2.Util.mix({
                points: line
              }, style)
            });
          }
          shapes.push(shape);
        }
        return shapes;
      } else {
        return container.addShape('Polyline', {
          className: 'line',
          attrs: F2.Util.mix({
            points: points
          }, style)
        });
      }
    },

    //将一整条线按实线虚线分为多条
    splitLines: function splitLines(ps, dim) {
      var lines = [];
      var i = 0,
        cur = [],
        last = null;
      last = cur.isDash = ps[0]._origin[dim] === true;
      cur.start = ps[0];

      //分线
      while (i < ps.length) {
        var p = ps[i];
        var isDash = p._origin[dim] === true;
        if (last !== isDash) {
          cur.end = p;
          lines.push(cur);

          cur = [p];
          cur.start = ps[i - 1];
          cur.isDash = isDash;
        } else {
          cur.push(p);
        }

        if (i >= ps.length - 1) {
          cur.end = p;
          lines.push(cur);
        }
        last = isDash;
        i++;
      }

      //计算绘制点
      lines = lines.map(function(ps) {
        var i = 0,
          l = ps.length,
          line = [];
        line.isDash = ps.isDash;
        line.push(hybridDefine.getMid(ps.start, ps[0]));
        for (; i < l; i++) {
          line.push(ps[i]);
        }
        line.push(hybridDefine.getMid(ps[l - 1], ps.end));
        return line;
      });

      return lines;
    },

    //计算两个点的中点
    getMid: function getMid(p1, p2) {
      return {
        x: (p1.x + p2.x) / 2,
        y: (p1.y + p2.y) / 2
      };
    }
  };
  F2.Shape.registerShape('line', 'hybrid', hybridDefine);

  var random = function random(a, b) {
    return a + Math.random() * (b - a);
  };
  var data = [{
    type: 'a',
    x: 1,
    y: random(2, 1.2)
  }, {
    type: 'a',
    x: 2,
    y: random(2, 1.6)
  }, {
    type: 'a',
    x: 3,
    y: random(2, 2.0)
  }, {
    type: 'a',
    x: 4,
    y: random(2, 2.4)
  }, {
    type: 'a',
    x: 5,
    y: random(2, 2.8)
  }, {
    type: 'a',
    x: 6,
    y: random(2, 3.2),
    dash: true
  }, {
    type: 'a',
    x: 7,
    y: random(2, 3.6),
    dash: true
  }, {
    type: 'a',
    x: 8,
    y: random(2, 4.0),
    dash: false
  }, {
    type: 'a',
    x: 9,
    y: random(2, 4.4)
  }, {
    type: 'b',
    x: 1,
    y: random(3, 3.2),
    dash: true
  }, {
    type: 'b',
    x: 2,
    y: random(3, 3.6),
    dash: true
  }, {
    type: 'c',
    x: 1,
    y: random(0, 1.2)
  }, {
    type: 'c',
    x: 2,
    y: random(0, 1.2),
    dash: true
  }, {
    type: 'c',
    x: 3,
    y: random(0, 1.6),
    dash: true
  }, {
    type: 'd',
    x: 5,
    y: random(1, 1.2),
    dash: true
  }, {
    type: 'd',
    x: 6,
    y: random(1, 1.2),
    dash: true
  }, {
    type: 'd',
    x: 7,
    y: random(1, 1.6)
  }];
  var chart = new F2.Chart({
    id: 'mountNode',
    pixelRatio: window.devicePixelRatio,
    width:500,
    height:500
  });
  chart.source(data, {
    y: {
      tickCount: 5
    }
  });
  chart.tooltip(false);
  chart.legend({
    itemWidth: null,
    align: 'center'
  });
  chart.line().shape('hybrid').position('x*y').color('type').style({
    dashDim: 'dash'
  });
  chart.render();
</script>


</body>
</html>
